<template>
  <AppTopBar />
  <aside :class="{ hidd: !isVisible }">
    <!-- logo -->
    <div class="logo" v-show="isVisible">
      <h1>
        <a :class="{ shakeAnime: isVisible }" class="main_font_color" title="Tomori" href="/">{{
          WEB_NAME
        }}</a>
      </h1>
    </div>
    <AppAsideBar v-show="isVisible" />
    <div
      @click="isVisible = !isVisible"
      class="isHiddenAsideBar"
      :title="isVisible ? '隐藏' : '展开'"
    ></div>
  </aside>
  <main>
    <Suspense>
      <template v-slot:default>
        <AppRouter />
      </template>
      <template v-slot:fallback>
        <h4>加载中，请稍后...</h4>
      </template>
    </Suspense>
  </main>
</template>

<script>
import { ref } from 'vue'

// import AppRouter from '@/layout/AppRouter.vue'
import AppAsideBar from '@/layout/AppAsideBar.vue'
import AppTopBar from '@/layout/AppTopBar.vue'
import { defineAsyncComponent } from 'vue'
const AppRouter = defineAsyncComponent(() => import('@/layout/AppRouter.vue'))

import { WEB_NAME } from '@/common/static.js'

function AsideModules() {
  // 用于隐藏或展开 Aside内容
  const isVisible = ref(true)

  return {
    isVisible
  }
}

export default {
  name: 'App',
  components: {
    AppAsideBar,
    AppRouter,
    AppTopBar
  },
  setup() {
    return {
      WEB_NAME,
      ...AsideModules()
    }
  }
}
</script>

<style lang="scss">
@import '~style/anime.scss';
</style>

<style lang="scss" scoped>
aside {
  width: 240px;
  position: relative;
  margin: 40px 0;
  margin-right: 40px;
  height: calc(100% - 80px);
  border-radius: 0 25px 25px 0;
  overflow: hidden;
  background-color: $aside_bg;
  transition: all 0.25s;
  animation: starAsideAnime 0.5s ease-in-out;
  // logo
  .logo {
    width: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 2/1;
    h1 {
      a {
        display: inline-block;
        font-size: 30px;
        font-weight: 550;
        color: $font;
        user-select: none;
      }
    }
  }
  // isHiddenAsideBar
  .isHiddenAsideBar {
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 8px;
    width: 20px;
    transform: translate(0, -50%);
    z-index: 10;
    &::after {
      display: block;
      content: '';
      margin: 0 auto;
      width: 5px;
      height: 100px;
      opacity: 0.6;
      background-color: $font;
      border-radius: 50px;
      transition: all 0.25s;
    }
    &:hover::after {
      opacity: 0.8;
    }
  }
}

// animation
.hidd {
  width: 40px;
  // transform: translate(-200px);
  transition: all 0.25s;
}
.shakeAnime {
  animation: shakeAnime 1.25s 0.625s;
}
main {
  position: relative;
  margin-top: 40px;
  flex: 1;
  height: calc(100% - 40px);
  overflow: hidden;
  animation: fade-in 1.25s 0.625s forwards;
  opacity: 0;
}
</style>
